<template>
  <div class="app-container">
    <div class="form-card">
      <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
        <!-- 产品信息 -->
        <div class="form-box">
          <div class="form-title">产品信息</div>
          <div class="form-content">
            <div style="display: flex; align-items: center;">
              <el-form-item label="贷款银行" prop="bankId">
                <el-select
                  style="width: 250px;"
                  clearable
                  v-model="form.bankId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in bankList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品名称" prop="productId">
                <el-select
                  style="width: 250px;"
                  clearable
                  v-model="form.productId"
                  :placeholder="form.bankId ? '请选择产品名称' : '请先选择银行'"
                >
                  <el-option
                    v-for="item in productList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="product-msg">
              <div>额度区间：0-500万元</div>
              <div>年化利率：5.5%-10%</div>
              <div>借款期限：12期</div>
              <div>还款方式：等额本息</div>
              <div>产品优势：额度高,利率低，灵活方便</div>
              <div>贷款类型：税贷</div>

              <span @click="seeDetail()"
                >产品详情 <i class="el-icon-d-arrow-right"></i>
              </span>
            </div>
          </div>
        </div>
        <div class="form-box">
          <div class="form-title">申请信息</div>
          <div class="form-content">
            <el-form-item label="申请企业：" prop="campany">
              <el-input
                style="width: 620px;"
                v-model="form.campany"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="税号：" prop="criteCode">
              <el-input
                style="width: 620px;"
                v-model="form.criteCode"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="法人：">
              <el-input
                style="width: 620px;"
                v-model="form.legal"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="phone">
              <el-input
                style="width: 620px;"
                v-model="form.phone"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input
                style="width: 620px;"
                v-model="form.password"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属省份：">
              <el-select
                clearable
                v-model="form.provinceId"
                placeholder="请选择"
                :disabled="$route.query.id ? true : false"
                style="width: 620px"
              >
                <el-option
                  v-for="item in proviceList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="申请人：">
              <el-input
                style="width: 620px;"
                v-model="form.name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系方式：">
              <el-input
                style="width: 620px;"
                v-model="form.phoneNumber"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请时间：" style="display: inline-block">
              <el-date-picker
                value-format="yyyy-MM-dd"
                format="yyyy 年 MM 月 dd 日"
                style="width: 620px"
                v-model="form.time"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
            <el-form-item label="申请贷款金额：">
              <el-input
                style="width: 620px;"
                v-model="form.money"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="还款期限" prop="loanTerm">
              <el-select
                style="width: 620px"
                v-model="form.loanTerm"
                placeholder="请选择还款期限"
              >
                <el-option
                  v-for="item in loanTermList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户经理" prop="adminId">
              <el-select
                clearable
                style="width: 620px"
                v-model="form.adminId"
                filterable
                placeholder="请选择客户经理"
              >
                <el-option
                  v-for="item in managerList"
                  :key="item.id"
                  :label="item.name + ' ' + '(' + item.phone + ')'"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="form-box">
          <div class="form-title">申请状态</div>
          <div class="form-content">
            <el-steps
              :active="currentTab"
              style="width: 50%; margin-left: 30px;"
            >
              <el-step>
                <template slot="title">
                  提交材料
                </template>
                <template slot="description">
                  提交资料，申请贷款
                </template>
              </el-step>
              <el-step title="银行受理">
                <template slot="description">
                  银行审核，请耐心等待
                </template>
              </el-step>
              <el-step title="审核结果">
                <template slot="description">
                  银行会通知借款人审核结果
                </template>
              </el-step>
            </el-steps>

            <div v-show="currentTab == 1" style="margin-top: 20px;">
              <el-form-item label="提交材料时间：">
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  format="yyyy 年 MM 月 dd 日"
                  style="width: 620px"
                  v-model="form.msgTime"
                  type="date"
                  placeholder="选择日期"
                />
              </el-form-item>
              <el-form-item label="提交材料明细：">
                <el-radio-group v-model="form.msg">
                  <el-radio
                    v-for="(v, idx) in msgList"
                    :key="idx"
                    :label="v.value"
                    >{{ v.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </div>
            <div v-show="currentTab == 2" style="margin-top: 20px;">
              <el-form-item label="银行审核状态：">
                <el-radio-group v-model="form.msgStatus">
                  <el-radio
                    v-for="(v, idx) in bankAuditList"
                    :key="idx"
                    :label="v.value"
                    >{{ v.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
              <div class="bank-audit-tips">
                <div>
                  个人消费贷款：线上审批时间通常为1~3个工作日，线下审批时间为1~2周。
                </div>
                <div>信用贷款：审批时间约为7~10个工作日。</div>
                <div>
                  银行贷款的审批和放款时间因多种因素而异，从几天到几个月不等。借款人应根据自己的需求和银行的政策来选择最适合的贷款类型和时间。
                </div>
              </div>
            </div>
            <div v-show="currentTab == 3" style="margin-top: 20px;">
              <div style="display: flex;">
                <el-form-item label="批款额度(元)：">
                  <el-input
                    style="width: 250px"
                    v-model="form.price"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <el-form-item label="批款方式：">
                  <el-select
                    style="width: 250px"
                    v-model="form.approvalWay"
                    placeholder="请选择批款方式"
                  >
                    <el-option
                      v-for="item in approvalWayList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </div>
              <div class="">
                <el-form-item label="批款日期：">
                  <el-date-picker
                    value-format="yyyy-MM-dd"
                    format="yyyy 年 MM 月 dd 日"
                    style="width: 250px"
                    v-model="form.approvalTime"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-form-item>
              </div>
              <div class="">
                <el-form-item label="上传额度截图：">
                  <single-upload
                    uploadType="2"
                    @uploadSucces="uploadSucces"
                    v-model="form.pic"
                  >
                    <div class="uploadPic" v-if="!form.pic">
                      <i
                        style="font-size: 40px; color: #ccc; font-weight: bold"
                        class="el-icon-plus"
                      ></i>
                    </div>
                  </single-upload>
                </el-form-item>
              </div>
            </div>
            <div style="width: 100%; text-align: center; margin-top: 20px;">
              <el-button
                v-if="currentTab > 1"
                style="margin-right: 20px;"
                @click="prevStep()"
                >上一步</el-button
              >
              <el-button
                v-if="currentTab < 3"
                style=""
                type="primary"
                @click="nextStep()"
                >下一步</el-button
              >
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <div style="width: 100%; position: fixed; bottom: 0px; background-color: #fff; height: 100px; line-height: 100px; z-index: 1000000;">
      <el-button @click="submit('formRef')" style="width: 120px;position: relative; left: 50%; transform: translateX(-50%); margin-left: -105px;" type="primary">提交</el-button>
    </div>
  </div>
</template>

<script>
const form = {
  bankId: null,
  productId: null,
  campany: null,
  criteCode: null,
  legal: null,
  phone: null,
  password: null,
  provinceId: null,
  name: null,
  phoneNumber: null,
  time: null,
  money: null,
  loanTerm: null,
  adminId: null,
  msgTime: null,
  msg: "0",
  msgStatus: null,
  price: null,
  approvalTime: null,
  pic: null
};
import { getProvinceList } from "@/api/tax";
import { getUserList } from "@/api/dept";
import SingleUpload from "@/components/Upload/uploadOne";
export default {
  components: {
    SingleUpload
  },
  watch: {
    "form.bankId": {
      handler(newVal, oldVal) {
        if(newVal) {
          console.log(newVal);
        } else {
          this.productList = []
          // console.log(newVal);
        
        }
      },
      deep: true,
      immediate: true
    }
  },

  data() {
    return {
      form: Object.assign({}, form),
      productInfo: {},
      bankList: [],
      loanTermList: [],
      proviceList: [],
      productList: [],
      managerList: [],
      bankAuditList: [],
      approvalWayList: [],
      msgList: [],
      rules: {
        bankId: [
          { required: true, message: "请选择贷款银行", trigger: "change" }
        ],
        productId: [
          { required: true, message: "请选择产品", trigger: "change" }
        ],
        campany: [
          { required: true, message: "请输入申请企业", trigger: "blur" }
        ],
        criteCode: [{ required: true, message: "请输入税号", trigger: "blur" }],
        legal: [{ required: true, message: "请输入法人", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        adminId: [
          { required: true, message: "请选择客户经理", trigger: "change" }
        ]
      },
      currentTab: 1
    };
  },
  async created() {
    this.bankList = await this.$getDictData("bank_list");
    this.loanTermList = await this.$getDictData("loan_term_list");
    this.msgList = await this.$getDictData("submit_materials_list");
    this.bankAuditList = await this.$getDictData("bank_audit_status");
    this.approvalWayList = await this.$getDictData("approval_way_list");
    this.getProviceList();
    this.getUserList();
  },
  methods: {
    uploadSucces() {
      this.$refs.formRef.validateField("pic");
    },
    // 获取部门列表
    getUserList() {
      getUserList().then(res => {
        this.managerList = res.data.map(v => {
          return {
            name: v.nickName,
            id: v.adminId,
            phone: v.phoneNumber
          };
        });
      });
    },
    getProviceList() {
      getProvinceList().then(res => {
        this.proviceList = res.data;
      });
    },
    seeDetail() {
      let href = this.$router.resolve({
        name: "productDetail",
        query: {
          id: 102
        }
      });
      window.open(href.href, "_blank");
    },
    prevStep() {
      this.currentTab--;
    },
    nextStep() {
      if (this.currentTab <= 3) {
        this.currentTab++;
      }
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        console.log(this.form);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  min-height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
.form-card {
  // padding-bottom: 100px;
  margin-bottom: 100px;
  background-color: #fff;
  // position: relative;
}
.form-box {
  .form-title {
    font-size: 18px;
    color: #222;
    font-weight: 500;
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
  }
  .form-content {
    padding: 20px 30px;
    // display: flex;
    .product-msg {
      background-color: #f3f3f3;
      padding: 20px;
      display: flex;
      align-content: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      position: relative;
      font-size: 14px;
      > div {
        width: 25%;
        line-height: 35px;
      }
      > span {
        cursor: pointer;
        position: absolute;
        bottom: 20px;
        right: 20px;
        color: #409eff;
      }
    }
    //
    .bank-audit-tips {
      margin-left: 120px;
      > div {
        font-size: 14px;
        color: #999;
        line-height: 30px;
      }
    }

    .uploadPic {
      width: 90px;
      height: 90px;

      background: #eeeeee;
      border-radius: 8px;
      position: relative;
      > i {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>
